<template>
    <div class="card" :style="`width:${width};height:${height}`">
        <div class="zs j"></div>
        <div class="ys j"></div>
        <div class="zx j"></div>
        <div class="yx j"></div>
        <div class="title">
             <template>
                <slot name='title'>
                    这里是标题
                </slot>
            </template>
        </div>
        <div class="section">
            <template>
                <slot name="section">
                    这里是echarts图表
                </slot>
            </template>
        </div>
        <!-- {{width}}{{height}} -->
    </div>
</template>
<script>
export default {
    props:[
        'width','height'
    ],
    data() {
        return {
            
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
}
</script>
<style lang="scss" scoped>
   .card{
        // width: 25vw;
        // height: 15vh;
        background: url('../assets/image/line(1).png');
        background-size: 100% 100%;
        border: 1px solid rgb(85, 85, 85);
        box-sizing: border-box;
        position: relative;
        color: #fff;
        .title{
            text-align: center;
            padding-top: 10px;
        }
        .section{
            // width: 100%;
            height: 80%;
            padding: 10px;
        }
        .j{
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top: 2px solid rgb(0, 217, 255);
            border-left: 2px solid rgb(0, 217, 255);
        }
        .zs{
            position: absolute;
            top: 0;
            left: 0;
        }
        .ys{
            position: absolute;
            top: 0;
            right: 0;
            transform: rotate(90deg);
        }
        .zx{
            position: absolute;
            bottom: 0;
            left: 0;
            transform: rotate(-90deg);
        }
        .yx{
            position: absolute;
            bottom: 0;
            right: 0;
            transform: rotate(-180deg);
        }
   }
</style>